<template>
    <div>
      <el-dialog
        :close-on-click-modal="false"
        title="分配角色"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <div>
          <el-row>
            <el-col :span="24">
              <div style="float: right; margin-bottom: 10px">
                <el-button
                  type="primary"
                  @click="personAdd"
                  icon="el-icon-document-add"
                  plain
                  >&nbsp;新增</el-button
                >
              </div>
            </el-col>
          </el-row>
          <vxe-table
            :data="data"
            border
            highlight-current-row
            style="margin-bottom: 10px"
            v-model="selectRow"
          >
            <vxe-column type="checkbox" width="50"></vxe-column>
            <vxe-column field="roleName" title="姓名"></vxe-column>
            <vxe-column field="roleId" title="角色值"></vxe-column>
            <vxe-column title="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click="userRoleDelete(scope.row)"
                  icon="el-icon-delete"
                  plain
                  >&nbsp;删除</el-button
                >
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
  
        <el-dialog
          width="60%"
          title="新增角色"
          :visible.sync="visible"
          append-to-body
          top="15vh"
          :before-close="handleCloseInner"
        >
          <vxe-table
            ref="mytable"
            :data="articlesData"
            style="width: 100%; margin-top: 10px"
            border
            highlight-current-row
            @checkbox-change="handleSelectionChange"
            @checkbox-all="handleAllSelectChang"
          >
            <vxe-column type="checkbox" width="40" />
            <vxe-column field="roleName" title="角色名称" sortable width="220" />
  
            <vxe-column field="roleId" title="角色值" />
          </vxe-table>
  
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCloseInner">取 消</el-button>
            <el-button type="primary" @click="personAddSubmit">确 定</el-button>
          </span>
        </el-dialog>
      </el-dialog>
    </div>
  </template>
    <script>
  import {
    getUserRoleSearch,
    getUserRoleDelete,
    getUserRoleSaveBatch,
    getRoleList,
  } from "@/api/datacentersg/achives/documentApi";
  import store from "@/store";
  export default {
    name: "userRolePop",
    components: {},
    props: [],
    data: () => ({
      dialogVisible: false,
      data: [],
      currentUser: null,
      personList: [],
      articlesData: [],
      multipleSelection: [],
      visible: false,
      dataForm: {
        userName: "",
        userNo: "",
      },
      row: "",
      selectRow:[],
    }),
    computed: {},
    mounted() {},
    methods: {
      initData(row) {
        this.dialogVisible = true;
        this.row = row;
        console.log(this.row, "row");
        this.getUserRoleList();
      },
      getUserRoleList() {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            userId: this.row.userId,
          },
        };
        getUserRoleSearch(params).then((result) => {
          if (result.result) {
            this.data = result.resultdata.data;
            this.selectRow = result.resultdata.data;
            console.log(this.selectRow,"selectRow");
          }
        });
      },
      personAdd() {
        this.visible = true;
        this.getListRole();
      },
  
      async getListRole() {
        const that = this;
        // 组装分页参数
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            currentPage: 1, // 当前多少页
            pageSize: 20, // 每页显示数据
          },
        };
        const R = await getRoleList(params);
        const data = R.resultdata;
        this.articlesData = data.data; // 填充列表数据
      },
      handleCloseInner() {
        this.visible = false;
      },
      handleClose() {
        this.dialogVisible = false;
      },
      handleSelectionChange(personRow) {
        this.personList = [];
        this.multipleSelection = [];
        this.personList = personRow.records;
        console.log(this.personList, "personList");
      },
      handleAllSelectChang({ checked, records }) {
        this.multipleSelection = [];
        this.personList = [];
        this.multipleSelection = records;
        console.log(this.multipleSelection, "multipleSelection");
      },
      userRoleAdd() {
        this.visible = true;
      },
  
      userRoleDelete(row) {
        this.$confirm("确定删除当前行?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const params = {
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            data: {
              id: row.id,
            },
          };
  
          getUserRoleDelete(params).then((result) => {
            if (result.result) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.getUserRoleList();
            }
          });
        });
      },
  
      personAddSubmit() {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          type: "role",
          data: [],
        };
        let allList = [...this.multipleSelection, ...this.personList];
        console.log(allList, "allList");
        allList.forEach((item) => {
          params.data.push({
            roleId: item.roleId,
            userId: this.row.userId,
            userName: null,
            userNo: null,
            roleName: item.roleName,
          });
        });
        if (allList.length == 0) {
          this.$message({
            message: "请先勾选角色",
            type: "warning",
          });
        } else {
          getUserRoleSaveBatch(params).then((result) => {
            if (result.result) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getUserRoleList();
              this.visible = false;
            }
          });
        }
      },
    },
  };
  </script>
    